<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问vue属性</title>
</head>
<body>
    <main id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>是否成年：{{age >= 18 ? "成年" : "未成年"}}</p>
        <p>{{say()}}</p>
    </main>
    <h2>访问vue属性</h2>
    <p>vue提供了 vue对象.$属性 的方式，来访问data，methods，el等属性，这里先做了解。</p>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            name: "Hydra",
            age: 35,
            message: "Hello"
        },
        // mehtods，是个对象，内部全部定义方法属性
        methods: {
            say() {
                // this指的是当前vue对象
                // 访问vue对象中的data中的数据，不用使用vue.data.XXX，直接使用vue.XXX即可
                return this.name + "说：“" + this.message + "”";
            }
        }
    });
    // 可以看到控制台打印的是每个属性的getter/setter
    // vue2的原理是Object.defineProperty()，装载属性的setter和getter，通过属性拦截然后响应式地操作DOM对象
    console.log("vue.$data = ",vue.$data); 

    // $el：返回的是vue实例接管的DOM节点
    console.log("vue.$el = ",vue.$el); 
    console.log(vue.$el == document.querySelector("#app")); // true
    // 扩展作业：除了$data和$el外，vue还提供了$什么来访问什么属性。
</script>
</html>